<template>
  <backDialog @handeDialog="handeDialog"></backDialog>
  <div class="w-full text-14px pb-80px">
    <van-tabs v-model:active="active" @change="tabsChange">
      <van-tab :title="item.name" v-for="(item, index) in tabsList">
        <div class="mt-10px p-20px bg-white" v-for="items in list">
          <div class="flex justify-between items-center pb-15px border-b">
            <div>证书ID：{{ items.goods_code }}</div>
            <div class="text-[#F9363C]">
              <span v-show="items.state == 1">已上架</span>
              <span v-show="items.state == 3">已下架</span>
            </div>
          </div>
          <div class="mt-15px pb-15px border-b">
            <div>馆藏精品：{{ items.goods_no }}</div>
            <div class="mt-15px">持有人：{{ items.user_name }}</div>
            <div class="mt-15px">价格：{{ items.price }}</div>
            <div class="mt-15px" v-show="items.seal_reason">
              封存原因：{{ items.seal_reason }}
            </div>
            <div class="mt-15px" v-show="items.update_time">
              更新时间：{{ items.update_time }}
            </div>
          </div>
          <div
            class="mt-15px w-full flex justify-between items-center"
            v-show="index == 0"
          >
            <div
              @click="openPopup('指派', '请输入指派用户的邀请码', 0, items)"
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              指派
            </div>
            <div
              @click="openPopup('拆分', '请输入需求拆分的价格', 1, items)"
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              拆分
            </div>
            <div
              @click="openPopup('转场', '请输入对方的店铺号', 2, items)"
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              转场
            </div>
            <div
              @click="openPopup('封存', '请输入封存的原因', 3, items)"
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              封存
            </div>
          </div>
          <div
            class="mt-15px w-full flex justify-between items-center"
            v-show="index == 1"
            @click="openPopup('解封', '', 4, items)"
          >
            <div
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              解封
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <van-popup v-model:show="showCenter" round class="p-20px">
      <div class="w-305px">
        <div class="mt-10px w-full text-center">{{ popupTitle }}</div>
        <div class="mt-20px" v-if="index != 4">
          <van-cell-group inset class="border border-[#999999]">
            <van-field
              v-model="inputVal"
              :placeholder="placeholder"
              class="h-44px w-full"
            />
          </van-cell-group>
        </div>
        <div class="flex justify-between items-center mt-20px">
          <div
            @click="showCenter = false"
            class="w-124px h-36px flex justify-center items-center bg-[#FAF9F9] rounded-5px text-[#999999] text-12px"
          >
            取消
          </div>
          <div
            @click="confirm()"
            class="w-124px h-36px flex justify-center items-center bg-[#2E95FF] rounded-5px text-12px text-[white]"
          >
            确认
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="successPopup" round class="p-30px">
      <div class="w-150px flex flex-col justify-center items-center">
        <van-image
          width="150px"
          height="150px"
          fit="cover"
          :src="getImageurl('shoping/success.png')"
        />
        <div class=" ">{{ popupTitle }}成功</div>
      </div>
    </van-popup>
  </div>
  <div v-show="list.length <= 0">
    <nodata></nodata>
  </div>
  <pagination
    @back="back"
    @next="next"
    :current_page="Info.current_page"
    :last_page="Info.last_page"
    :per_page="Info.per_page"
    :total="Info.total"
  ></pagination>
  <div v-if="store.isMobile">
    <van-floating-bubble icon="search" @click="showCenter = true" />
  </div>
</template>
<script setup>
import getImageurl from "@/util/getImageurl";
import pagination from "@/components/pagination.vue";
import nodata from "@/components/nodata.vue";
import backDialog from "@/components/backDialog.vue";
import {
  shopSellOrder,
  shopSetSellOrder,
  shopSplit,
  shopTransition,
  shopPpOrderDo,
} from "@/util/api";
import { showToast } from "vant";
import { reactive } from "vue";
import { useUserStore } from "@/store/index";
const store = useUserStore();
const active = ref("0");
const tabsList = ref([
  { name: "正常证书" },
  {
    name: "封存证书",
  },
]);
const showCenter = ref(false);
const popupTitle = ref("");
const successPopup = ref(false);
const placeholder = ref("");
const param = reactive({
  page: 1,
  state: 0, //0正常1封存
  no: "",
});
const inputVal = ref("");
const Info = reactive({
  current_page: 0,
  last_page: 0,
  per_page: 0,
  sj_money: 0,
  total: 0,
  total_money: 0,
});
//操作传值
const paramInfo = reactive({
  id: "",
  state: "", //1解封3封存
  seal_reason: "", //封存理由
  price: "", //拆掉金额
  shop_no: "", //店铺号
  no: "", //邀请码
});
const list = ref([]);
const index = ref();
const getData = async () => {
  const res = await shopSellOrder(param);
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  list.value = res.msg.data;
  //(list.value);
};
getData();
const tabsChange = (v) => {
  param.state = v;
  getData();
};
const back = () => {
  param.page--;
  getData();
};
const next = () => {
  param.page++;
  getData();
};
const confirm = async () => {
  //  console.log(index.value);
  switch (index.value) {
    case 0:
      paramInfo.no = inputVal.value;
      const res0 = await shopPpOrderDo(paramInfo);
      res0.code == 1 ? (successPopup.value = true) : showToast(res0.msg);
      break;
    case 1:
      paramInfo.price = inputVal.value;
      const res1 = await shopSplit(paramInfo);
      res1.code == 1 ? (successPopup.value = true) : showToast(res1.msg);
      break;
    case 2:
      paramInfo.shop_no = inputVal.value;
      const res2 = await shopTransition(paramInfo);
      res2.code == 1 ? (successPopup.value = true) : showToast(res2.msg);
      break;
    case 3:
      paramInfo.seal_reason = inputVal.value;
      paramInfo.state = 3;
      const res3 = await shopSetSellOrder(paramInfo);
      res3.code == 1 ? (successPopup.value = true) : showToast(res3.msg);
      break;
    case 4:
      paramInfo.state = 1;
      const res4 = await shopSetSellOrder(paramInfo);
      res4.code == 1 ? (successPopup.value = true) : showToast(res4.msg);
      break;
    case 5:
      //搜索
      param.no = inputVal.value;
      break;
  }
  showCenter.value = false;
  getData();
};
const openPopup = async (val, p, i, item) => {
  //index 0 指派 1拆分 2转场 3封存 4解封

  index.value = i;
  paramInfo.id = item.id;
  showCenter.value = true;
  popupTitle.value = val;
  placeholder.value = p;
};
const handeDialog = () => {
  showCenter.value = true;
  popupTitle.value = "搜索";
  placeholder.value = "请输入邀请码";
  index.value = 5;
};
</script>
